<template>
  <div id="order" class="container">
    <el-tabs v-model="activeName" class="tabs" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in typeList"
        :key="item.id"
        :value="item.id"
        :label="item.label"
      />
    </el-tabs>
    <!-- <el-button type="danger" size="small" icon="el-icon-delete" @click="Batchdelete">批量删除</el-button> -->
    <BouncedDialog :title="addForm.id?'编辑':'添加'" :dialog-show.sync="dialogShow" :width="50" class="inner">
      <el-form ref="addForm" :model="addForm" :rules="rules" inline class="addForm" label-width="80px">
        <el-form-item label="文件:">
          <el-upload
            ref="upload"
            :headers="myHeaders"
            class="avatar-uploader"
            :action="$store.getters.updateURL+'/upload/save'"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :auto-upload="true"
            :file-list="fileList"
            :multiple="true"
            :data="{type:activeName}"
          >
            <el-button size="small" type="primary">选取文件</el-button>
            <!-- <div style="font-size: 12px;color: #999999;line-height: 30px;font-weight: 500" /> -->
          </el-upload>
        </el-form-item>
        <div class="btn">
          <el-button @click="dialogShow = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-form>
    </BouncedDialog>
    <div style="padding-top:20px; background-color:#fff">
      <el-button
        type="primary"
        class="add"
        size="small"
        icon="el-icon-plus"
        style="margin-bottom:15px;margin-left:15px"
        @click="goAdd"
      >添加</el-button>
      <el-table
        :data="orderData"
        border
        stripe
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column v-if=" type == 2 " label="预览">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.url"
              :preview-src-list="scope.row.list"
            />
            <div v-if="scope.row.mime_type == 'mp4'" class="video">
              <el-dialog
                width="72%"
                append-to-body
                top="20px"
                :visible.sync="dialogVisible"
                @closed="closeDialog"
              >
                <h3>{{ playvideoName }}</h3>
                <video
                  id="video"
                  width="100%"
                  autoplay="autoplay"
                  :src="playvideo"
                  :poster="playvideo"
                  controls="controls"
                  preload
                >
                  您的浏览器不支持 video 标签。
                </video>
              </el-dialog>
              <!-- 页面table显示的video标签 -->
              <!-- <video
                :src=" imgUrl+scope.row.url"
                width="100"
                preload
              /> -->
              <i
                class="el-icon-video-play playIcon"
                @click="handleCheck(scope.row)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" show-overflow-tooltip />
        <el-table-column label="文件分类" prop="type" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.type==1">压缩包</span>
            <span v-else-if="scope.row.type==2">图片</span>
            <span v-else-if="scope.row.type==3">视频</span>
            <span v-else-if="scope.row.type==4">文档</span>
            <span v-else-if="scope.row.type==5">音频</span>
          </template>
        </el-table-column>
        <el-table-column label="文件大小" prop="size" width="150px" />
        <el-table-column label="存储方式" prop="storage" width="150px" />
        <el-table-column label="文件类型" prop="mime_type" width="150px" />
        <el-table-column label="文件地址" prop="url" show-overflow-tooltip />
        <el-table-column label="上传时间" prop="update_time" width="210" show-overflow-tooltip />
        <el-table-column label="操作" width="200px" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-clipboard:copy="scope.row.url"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              class="edit"
              size="mini"
            >复制链接</el-button>
            <el-button class="dele" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      :current-page="page.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      :hide-on-single-page="page.total<page.size?true:false"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import attachmentApi from '@/api/system/attachment.js'
import websiteApi from '@/api/website.js'
import { getToken } from '@/utils/auth'
import log from '@/api/log'
var token1 = 'Bearer ' + getToken()
export default {
  data() {
    return {
      dialogVisible: false, // 视频播放弹窗
      playvideo: null, // 存储用户点击的视频播放链接
      playvideoName: null, // 存储正在播放视频的名称
      videoName: '',
      typeList: [
        { label: '全部', id: 0 },
        { label: '压缩包', id: 1 },
        { label: '图片', id: 2 },
        { label: '视频', id: 3 },
        { label: '文档', id: 4 },
        { label: '音频', id: 5 }
      ],
      activeName: '0',
      type: 0,
      list: [],
      myHeaders: { Authorization: token1 },
      headers: {},
      siteId: this.$store.getters.siteId,
      imageUrl: '',
      imgUrl: this.$store.getters.updateURL,
      orderData: [], //
      dialogShow: false,
      options: [], // 站点下拉选项
      value: '', // 站点下拉框的值
      cateList: '', // 分类列表
      fileList: [], // 文件上传列表
      addForm: {
      },
      rules: {
        name: [
          { required: 'true', message: '请输入友链的名称', trigger: 'blur' }
        ],
        url: [
          { required: 'true', message: '请输入友链的链接', trigger: 'blur' }
        ],
        sort: [
          { required: 'true', message: '请输入友链的排序', trigger: 'blur' }
        ]
      },
      searchForm: {
        title: ''
      },
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      val: {

      },
      id: ''

    }
  },
  // watch: {
  //   siteId(val, value) {
  //
  //   }
  // },
  created() {
    this.getList()
    // this.getCatelist()
  },
  mounted() {
    // this.getTikets()
  },
  updated() {

  },
  methods: {
    // 复制到剪切板
    onCopy() {
      this.$message.success('复制成功！')
    },
    onError() {
      this.$message.error('复制失败，请重试！')
    },
    handleCheck(row) {
      this.playvideo = row.url // 存储用户点击的视频播放链接
      this.playvideoName = row.name // 存储用户点击的视频播放链接
      this.dialogVisible = true
      // this.videoName = this.playvideoName
    },
    closeDialog() {

    },
    // tab切换
    handleClick(val) {
      this.activeName = val.index
      this.type = val.index
      this.getList()
    },
    // 上传成功
    handleAvatarSuccess(res, file, fileList) {
      if (res.code == 0) {
        // this.addForm.file = file.response.data
        const arr = []

        fileList.forEach(el => {
          if (el.response) {
            arr.push(el.response.data)
          }
        })
        this.addForm.file = arr
      } else {
        this.$message.error(res.msg)
      }
    },
    upload(row) {
      this.val.id = row.id
      this.val.title = row.title
      this.val.type = row.type
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
    },
    // 全选
    handleSelectionChange(val) {

    },
    // 批量删除
    Batchdelete() {

    },
    // 获取站点列表
    getWebsiteList() {
      websiteApi.websiteList().then(res => {
        this.options = res.data
      })
    },
    // 选择站点
    chooseWedsite(val) {
      this.$forceUpdate()

    //   this.addForm.id = val
    },
    // 获取文件类别列表
    getCatelist() {
      attachmentApi.cateList().then(res => {
        this.cateList = res.data
      })
    },
    chooseCate(val) {

    },
    // 新增
    goAdd() {
      this.id = ''
      this.addForm = {}
      this.fileList = []
      this.dialogShow = true
    },
    // 编辑
    editor(row) {
      // this.fileList = []
      this.addForm.id = row.id

      this.fileList.splice(0, 1, { name: row.name, url: 'tihs.imgUrl' + 'row.url' })
      this.dialogShow = true
    },
    // 获取内链详情
    getInfo(val) {
      attachmentApi.innerInfo({ id: val }).then(res => {
        this.addForm = res.data
        this.dialogShow = true
      })
    },
    submit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (!this.addForm.id) {
            // this.$refs.upload.submit()// 上传文件
            attachmentApi.attachmentSave(this.addForm.file).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.getList()
                this.dialogShow = false
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            attachmentApi.attachmentUpdate({ id: this.addForm.id, file: this.addForm.file }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                tis.getList()
                this.dialogShow = false
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    },

    // 删除
    del(row) {
      this.$confirm('此操作将删除该附件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        attachmentApi.attachmentDelete({ id: row.id }).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 列表
    getList() {
      this.val.page = this.page.currentPage
      this.val.limit = this.page.size
      this.val.type = this.type
      // this.val.title = this.searchForm.title
      attachmentApi.attachmentList(this.val).then(res => {
        this.orderData = res.data
        this.page.total = res.count
        // this.drawerTableList = res.data
        this.list = []
        // 表格数据  drawerTableList
        // 获取每张图片的地址
        for (var x = 0;x < this.orderData.length;x++) {
          this.list.push(this.orderData[x].url)
        }

        // 根据图片顺序（index）更改每张图片绑定的list的图片顺序
        for (var i = 0;i < this.orderData.length;i++) {
        // this.list.push(this.drawerTableList[i].path)
          var container = this.list

          var frontArr = container.slice(0, i)
          var behindArr = container.slice(i, this.orderData.length)
          var list = behindArr.concat(frontArr)
          this.orderData[i].list = list
        }
      })
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    }

  }
}
</script>
<style lang='scss'>
  .tabs.el-tabs--card>.el-tabs__header .el-tabs__item{
  background-color: #eee;
  border: none;
  margin-right: 5px;
}
.tabs.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #fff;
}
.tabs.el-tabs--card>.el-tabs__header .el-tabs__nav{
  border-radius: 0;
  border: none;
}
.tabs.el-tabs--card .el-tabs__header{
  margin: 0;
}
.tabs.el-tabs--card>.el-tabs__header{
  border-bottom: 0;
}
#order{

  .inner{
    .el-select{
        width: 100%;
    }
  }
  .addForm .el-form-item__content{
      width: calc(100% - 80px);
    }
    .el-upload-list__item {
  transition: none !important;
}
}
</style>
<style scoped lang='scss'>
    .el-table{
      margin-bottom: 20px;
    }
    .search{
      min-width: 1350px;
      background-color: #fff;
      padding: 35px 30px 20px;
      border-radius: 5px;
      margin-bottom: 20px;
    }

</style>
